<template>
  	<div>
  		<div class="di" v-for="value in list" v-show="zanwu">
			<div class="ji_fenk">
			  	<ul>
			  		<li class="tu_tuone">
			  			<img src="static/jifenshangcheng_select.png" style="width: 100%;height: ">
			  		</li>
			  		<li class="jifenshangcheng">积分商城</li>
			  		<li class="yifahuo">{{value.zhuangtai}}</li>
			  		<div class="clearfix"></div>
			  	</ul>
	  		</div>
		  	<router-link v-for="zhi in value.goods" :to="{path:'/dindanxiangqing',query:{order_id:zhi.order_id}}">
			  	<div class="tu1_boxone" style="display: table;width: 100%;">
			  		<div class="tu1_tuone">
				  		<div class="tupian1">
				  			<img :src="url + zhi.image" style="width: 100%;height: 100%;">
				  		</div>
				  		<div class="wenzi">
					  		<p style="font-size: 13px;color: #4a4a4a;line-height: 16px;height: 32px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;">{{zhi.goods_name}}</p>
					  		<p style="font-size: 12px;color: #9b9b9b;line-height: 12px;margin-top: 5px;">{{zhi.attr_name}}</p>
					  		<p style="line-height: 13px;font-size: 14px;color: #4A4A4A;margin-top: 9px;float: left;">{{zhi.jifen}}积分</p>
					  		<p class="cheng_1">x {{zhi.num}}</p>
				  		</div>
			  		</div>
			  	</div>
			</router-link>
		  	<div style="width: 100%;padding: 0 6px;display: table;height: 35px;">
			  	<div class="you_feione">(含邮费)</div>
			  	<div class="j_fone">积分</div>
			  	<div class="er_erone">{{value.jifen1}}&nbsp;&nbsp;</div>
			  	<div class="ds_pqgzone">共{{value.num1}}件商品 合计：</div>
			  	<div class="clearfix"></div>
		  	</div>
  		</div>
  	<div style="height: 8px;background: #F5F5F5;width: 100%;"></div>
  	<div v-show="!zanwu" style="margin-top: 50px;width: 100%;display: table;"><p style="font-size: 14px;color: #333;line-height: 30px;text-align: center;">暂无信息</p></div>
  	<loading :show="show2" :text="text1"></loading>
</div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
export default {
	components: {
		mapState, 
		mapActions
	},
	data () {
		return {
			list:'',
			zanwu:true,
			show2:false,
			text1:'Loading...'
		}
	},
	created(){
		this.show2 = true;
		var that = this;
		axios.post(that.url+"/home/JifenOrder/getOrdersByOpenId",{openid:this.token})
        .then(function(res){
        	console.log(res)
        	if(res.data.length == 0){
        		that.zanwu = false;
        	}else{
        		that.zanwu = true;
        		for(var i=0;i<res.data.length;i++){
	        		if(res.data[i].order_status == '-1'){
		        		res.data[i].zhuangtai = '未支付';
		        	}else if(res.data[i].order_status == '1'){
		        		res.data[i].zhuangtai = '已支付';
		        	}else if(res.data[i].order_status == '2'){
		        		res.data[i].zhuangtai = '已发货';
		        	}else if(res.data[i].order_status == '3'){
		        		res.data[i].zhuangtai = '已完成';
		        	}
	        	}
	        	that.list = res.data;
        	}
        	that.show2 = false;
        })
        .catch(function(err){
            console.log(err);
        })
	},
  	computed:{
        ...mapState({
            token: state => state.Token.userToken()//获取用户Token
        }),
    }
}
</script>

<style>
	body{
		background: #fff;
	}
.content1{
		width: 100%;
		border: 1px /*solid*/ red;
		color: white;
		/*border: 1px solid red;*/
	}
	
.zl{
		width: 100%;
		text-align: center;
		line-height: 20px;
		font-size: 16px;
		margin-top: 15px;
		color: #333;
	}
.gzjf{width: 100%;
		text-align: center;
		line-height: 17px;
		font-size: 13px;
		color: #7f7f7f;
		margin-top: 10px;
		padding: 0 15px;
		
	}
.lan{
		width: 100%;
		border: 1px /*solid*/ green;
		margin-top: 20px;
	}
.yq{margin: 0 auto;
		width: 100%;
		height: 44px;
		background-color: #00c850;
		color: #FFFFFF;
		line-height: 22px;
	}
.lan1{
		float: left;
		width: 100%;
		border: 1px /*solid */green;
		
		line-height: 13px;
		font-size: 13px;
		color: #333;
		margin-left: 301px;
		margin-bottom: 20px;
	}
.yq1{
		padding: 0 20px;
		width: 100%;
		height: 44px;
		background-color: white;
		color: #00C850;
		line-height: 22px;
	}
	
*{list-style: none;margin: 0;padding: 0;}
.pq li{color: #333;
	       float: left;
	       line-height: 20px;
	       font-size: 14px;
	       margin-top: 10PX;
}
.pq .tu{height: 24px;
		width: 24px;
		border-radius: 50%;
		border: 1px /*solid*/ black;
		margin: 0 3px;
		margin-top: 8PX;
		}

.pq .pqz{float: right;
		color: #7f7f7f;
		line-height: 14px;
	    font-size: 13px;
	    /*margin-top: 13PX;*/
		}
.er_erone{float: right;
		color: #333;
		line-height: 35px;
	    font-size: 16px;
}
.j_fone{float: right;
		color: #333;
		line-height:35px;
	    font-size: 12px;
}	
.you_feione{float: right;
		color: #333;
		line-height:35px;
	    font-size: 12px;
}	
.wenzi{margin-left: 10px;
		float: left;
		box-sizing: border-box;
		border: /*solid*/ yellow 1px;
		width:calc(100% - 85px); 
		}
.di{margin: 0;
			box-sizing: border-box;
			border: /*solid*/ 1PX slateblue;
			padding: 0 15px;
			background: #FFFFFF;
			}
.hyzl{float: right;
		background: #9b9b9b;
		height: 12px;
		width: 12px;
		margin-top: 5px;
		}
.ds_pqgzone{
			font-size: 12px;
			color: #333;
			float: right;
			line-height:35px;
			}

.clearfix{float: none;
	clear: both;
	}

.tu1_boxone{
	
	border-bottom: 1px solid #eeeeee;
	padding: 12px 0px;
	
}			
.tupian1{
	height: 75px;
	width: 75px;
	float: left;
	/*background: url(../assets/img/Rectangle 26.png) no-repeat center;*/
}	
.ji_fenk{
	border-bottom: 1px solid #EEEEEE;
	padding:0px 0px;
}
.jifenshangcheng{
	float: left;
	line-height:35px;
	font-size: 14px;
	margin-left: 10px;
}
.yifahuo{
	float: right;
	line-height:35px;
	font-size: 14px;
	color: #FF2E22;
}
.tu_tuone{
	width: 21px;
	height: 21px;
	float: left;
	margin-top:7px;
}
.tu1_tu1{
	border: 1px /*solid*/ red;
	margin-top: 0px;
}
.cheng_1{
	float: right;
	margin-top: 10px;
	line-height: 13px;
	font-size: 13PX;
	color: #4A4A4A;
}
</style>
